<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<link rel="stylesheet" type="text/css" href="../../css/global/public.css" />
	<link rel="stylesheet" type="text/css" href="../../css/global/mui.css" />
	<link rel="stylesheet" type="text/css" href="../../css/inquiry-service.css" />
	<script type="text/javascript" src="../../js/lib/mui.min.js"></script>
	<script type="text/javascript" src="../../js/lib/mui.zoom.js"></script>
	<script type="text/javascript" src="../../js/lib/mui.previewimage.js"></script>
	<style type="text/css">
		.mui-preview-image.mui-fullscreen {
			position: fixed;
			z-index: 20;
			background-color: #000;
		}
		.mui-preview-header,
		.mui-preview-footer {
			position: absolute;
			width: 100%;
			left: 0;
			z-index: 10;
		}
		.mui-preview-header {
			height: 44px;
			top: 0;
		}
		.mui-preview-footer {
			height: 50px;
			bottom: 0px;
		}
		.mui-preview-header .mui-preview-indicator {
			display: block;
			line-height: 25px;
			color: #fff;
			text-align: center;
			margin: 15px auto;
			width: 70px;
			background-color: rgba(0, 0, 0, 0.4);
			border-radius: 12px;
			font-size: 16px;
		}
		.mui-preview-image {
			display: none;
			-webkit-animation-duration: 0.5s;
			animation-duration: 0.5s;
			-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
		}
		.mui-preview-image.mui-preview-in {
			-webkit-animation-name: fadeIn;
			animation-name: fadeIn;
		}
		.mui-preview-image.mui-preview-out {
			background: none;
			-webkit-animation-name: fadeOut;
			animation-name: fadeOut;
		}
		.mui-preview-image.mui-preview-out .mui-preview-header,
		.mui-preview-image.mui-preview-out .mui-preview-footer {
			display: none;
		}
		.mui-zoom-scroller {
			position: absolute;
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			-webkit-box-align: center;
			-webkit-align-items: center;
			align-items: center;
			-webkit-box-pack: center;
			-webkit-justify-content: center;
			justify-content: center;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			width: 100%;
			height: 100%;
			margin: 0;
			-webkit-backface-visibility: hidden;
		}
		.mui-zoom {
			-webkit-transform-style: preserve-3d;
			transform-style: preserve-3d;
		}
		.mui-slider .mui-slider-group .mui-slider-item img {
			width: auto;
			height: auto;
			max-width: 100%;
			max-height: 100%;
		}
		.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
			width: 100%;
		}
		.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
			display: inline-table;
		}
		.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
			display: table-cell;
			vertical-align: middle;
		}
		.mui-preview-loading {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			display: none;
		}
		.mui-preview-loading.mui-active {
			display: block;
		}
		.mui-preview-loading .mui-spinner-white {
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -25px;
			margin-top: -25px;
			height: 50px;
			width: 50px;
		}
		.mui-preview-image img.mui-transitioning {
			-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
			transition: transform 0.5s ease, opacity 0.5s ease;
		}
		@-webkit-keyframes fadeIn {
			0% {
				opacity: 0;
			}
			100% {
				opacity: 1;
			}
		}
		@keyframes fadeIn {
			0% {
				opacity: 0;
			}
			100% {
				opacity: 1;
			}
		}
		@-webkit-keyframes fadeOut {
			0% {
				opacity: 1;
			}
			100% {
				opacity: 0;
			}
		}
		@keyframes fadeOut {
			0% {
				opacity: 1;
			}
			100% {
				opacity: 0;
			}
		}
		p img {
			max-width: 100%;
			height: auto;
		}
	</style>
<title>问诊服务</title>
</head>
<body>
<div class="top-prompt bg_blue textC is_chat_off">24小时或20次对话后结束问诊</div>
<div class="top-prompt bg_gray textC is_chat_no" style="display:none">问诊结束</div>
<div class="service-dialogue">
	<ul class="font2" id="im_content">
	</ul>
	<div class="prompt-dilog" style="display:none;"><span class="font1 textC">医生回复仅为建议，具体治疗请前往医院进行</span></div>
</div>
<div class="service-footer" id="service-footer">
	<div class="write">
		<input type="text" placeholder="请输入文字描述病情" id="msg">
		<div class="more"><img src="../../images/more.png"></div>
		<button id="oksent">发送</button>
	</div>
	<div class="function animat">
		<ul>
			<li id="album">
				<input type="file" accept="image/*" class="photos fileToUpload" name="fileToUpload" id="fileToUpload" data-id=1 />
				<img src="../../images/function1.png" />
				<p>相册</p>
			</li>
			<li id="photograph">
				<input type="file" accept="image/*" class="photos fileToUpload" name="fileToUpload" id="fileToUpload2" data-id=2 />
				<img src="../../images/function2.png" />
				<p>拍照</p>
			</li>
		</ul>
	</div>
</div>
<!--弹出样式2-->
<div class="more-pop is_chat_no" style="display:none">
	<div class="font4 question-close">
		问题已自动关闭
		<p class="font2">请为医生的服务打分或者您可以选择付费咨询</p>
		<span></span>
	</div>
	<div class="click font3">
		<a data-href="../service/evaluate-doctor.html?orderid=" id='links'>评价医生</a>
		<button id="get_doctor">付费咨询</button>
	</div>
</div>
</body>
</html>
<!--公共方法-->
<script type="text/javascript" src="../../js/module/utilModule.js"></script>
<!--配置信息-->
<script type="text/javascript" src="../../js/common/config.js"></script>
<script type="text/javascript" src="../../js/lib/zepto.min.js"></script>
<!--公共布局-->
<script type="text/javascript" src="../../js/common/common.js"></script>
<!--IM-->
<script language='javascript' src='../../js/lib/IM/webim.config.js'></script>
<script language='javascript' src='../../js/lib/IM/strophe-1.2.8.min.js'></script>
<script language='javascript' src='../../js/lib/IM/websdk-1.4.12.js'></script>
<script type="text/javascript" src="../../js/lib/IM/ImUtilModule.js"></script>

<!--自定义模块-->
<!-- <script type="text/javascript" src="js/module/homepageModule.js" ></script>
<script type="text/javascript" src="js/homepage/homepage.js" ></script> -->
<script type="text/javascript" src="../../js/common/upload.js"></script>
<script>
	mui.previewImage();
	$(function() {
		var $open = true;
		$(".service-footer .more").click(function() {
			if($open) {
				$(".service-footer .function").fadeIn();
			} else {
				$(".service-footer .function").fadeOut();
			}
			$open = !$open;
		});
		$("#album").click(function() {
			$(".global-pop1").fadeIn();
			$(".popBox .text span").text('"馨语医疗"想访问您的照片');
			$(".popBox .text p").text('若不允许，您将无法在馨语医疗中发送或保存照片');
		});
		$("#photograph").click(function() {
			$(".global-pop1").fadeIn();
			$(".popBox .text span").text('"馨语医疗"想访问您的相机');
			$(".popBox .text p").text('若不允许，您将无法在馨语医疗中发送或保存照片');
		});
		$(".global-pop1 .cancel").click(function() {
			$(".global-pop1").fadeOut();
		});
		$(".service-footer #msg").focus(function() {
			if($(".service-footer .function").attr("display", "block")) {
				$(".service-footer .function").fadeOut();
			}
			$open = !$open;
		});
		// 键盘遮罩
		$('#msg').on("focus",function() {
			var $this=this;
			setTimeout(function(){
				$this.scrollIntoView(true);
				$this.scrollIntoViewIfNeeded();
			},20000);
		});

		//获取 doctor_im
		var usernameIM = utilModule.getQueryString("usernameIM") ? utilModule.getQueryString("usernameIM") : mui.alert("错误", '提示');
		//获取 orderid
		var orderid = utilModule.getQueryString("orderid") ? utilModule.getQueryString("orderid") : 1;
		//获取 payStatus
		var payStatus = utilModule.getQueryString("payStatus") ? utilModule.getQueryString("payStatus") : 1;
		//获取医生id
		var doctorid = utilModule.getQueryString("doctorid") ? utilModule.getQueryString("doctorid") : mui.alert("未获取到医生错误", '提示');
		//获取医生 信息
		var doctor_info = new Object();
		utilModule.post({
			url: "doctor/doctorDetail",
			needJson: false,
			data: {
				"doctorId": doctorid
			},
			async: false,
			success: function(response) {
				doctor_info = response.doctor;
			},
			false: function(response) {
				mui.alert("未获取到医生错误", '提示');
				return false;
			}
		});
		console.log(doctor_info);
		if($.isEmptyObject(doctor_info)) {
			mui.alert("未获取到医生信息", "提示");
			return false;
		}
		//获取 患者提问的病因
		utilModule.get({
			url: "userCenter/getIndexIM?id=" + USERID,
			needJson: false,
			async: false,
			success: function(response) {
				var html = "";
				$.each(response, function(index, obj) {
					if(orderid == obj.id && payStatus == obj.orderType) {
						html = '<li class="pullRight">' +
							'<div class="dialogue2">(' + obj.sex + "," + obj.age + '岁)' +
							obj.questionbody +
							'</div>' +
							'</li>'
					}
				});
				if(html == "") {
					
					$(".is_chat_no").show();
					$(".is_chat_off").hide();
					$(".prompt-dilog").show();
					mui.alert("问诊已经结束", '提示');
					//$("body").css("padding-bottom", "0");
				}
				$("#im_content").append(html);
			}
		});
		//获取 聊天记录
		var chatlist = JSON.parse(utilModule.getStorage("chat_list"));
		//查询是否聊天过期
		if(chatlist != null) {
			if(typeof(chatlist[usernameIM]) != "undefined") {
				var is_chat = ImUtilModule.isLastChat(chatlist[usernameIM]);
				if(!is_chat) {
					$(".is_chat_no").show();
					$(".is_chat_off").hide();
					$(".prompt-dilog").show();
					var chatList = utilModule.getStorage("chat_list");
				
					if(chatList != null) {
							var chatObject = JSON.parse(chatList);
							var rd_key = usernameIM;
							delete chatObject[rd_key];
							
							var $chatObject = JSON.stringify(chatObject);
							if($chatObject.length ==2){
									utilModule.removeStorage("chat_list");
							}else{
									utilModule.setStorage("chat_list", $chatObject);
							}
					}
					utilModule.post({
						url: "consultOrderPay/confirmFinishOrder",
						data: {
							id: orderid,
							orderType: payStatus
						},
						needJson: true,
						async: false,
						success: function(response) {
							console.log('订单状态');
							utilModule.removeStorage("is_chat");
						}
					});
				}
			}
		}
		//评价医生
		$("#links").on("click", function() {
			window.location.replace("../service/evaluate-doctor.html?serviceid=" + orderid + "&doctorid=" + doctorid + "&type=" + payStatus);
		});
		//再次提问
		$("#get_doctor").on("click", function() {
			location.replace("../doctor/doctor-details.html?doctorid=" + doctorid);
		});
		// IM连接
		var conn = ImUtilModule.conn();
		// IM 登录
		ImUtilModule.login(conn);
		// 开启监听
		ImUtilModule.listen(conn);
		//发送图片
		$(".fileToUpload").on("change", function() {
			if($(this).data("id") == 1) {
				ImUtilModule.sendPrivateImg(conn, usernameIM, 1);
			} else if($(this).data("id") == 2) {
				ImUtilModule.sendPrivateImg(conn, usernameIM, 2);
			} else {
				mui.alert("发送错误", '提示');
				return false;
			}
		});
		//绑定发送消息按钮
		$("#oksent").on("click", function() {
			var list1 = JSON.parse(utilModule.getStorage("chat_list"));
			var chatlist = JSON.parse(utilModule.getStorage("chat_list"));
			if(list1 != null) {
				if(list1[usernameIM] != undefined) {
					if(list1[usernameIM].length < 1) {
						mui.alert("等待医生回复", '提示');
						return false;
					}
				} else {
					mui.alert("等待医生回复", '提示');
					return false;
				}
			} else {
				if($("#msg").val() !="aak"){
                    mui.alert("等待医生回复", '提示');
                    return false;
                }
			}
			var contact_msg = $("#msg").val();
			if(contact_msg == "") {
				mui.alert("请填写内容再发送", '提示');
				return false;
			}
			var html = '<li class="pullRight">' +
				'<div class="dialogue2">' +
				contact_msg +
				'</div>' +
				'</li>'
			$("#im_content").append(html);
			mui.scrollTo(10000, 500);
			$("#msg").val("");
			//发送环信
			var is_chat = 1;
            if(chatlist!=null){
                chatlist =ImUtilModule.isLastChat(chatlist[usernameIM], "type");
				if(is_chat==0){
					$(".is_chat_no").show();
					$(".is_chat_off").hide();
					$(".prompt-dilog").show();
					mui.alert("问诊已经结束", '提示');
				}
            }
			ImUtilModule.singleChat(conn, usernameIM, contact_msg);
			var arr_message = {
				[usernameIM]: [{
					"doctorid": doctorid,
					"usernameIM": usernameIM,
					"realname": doctor_info.realname,
					"time": new Date().getTime(),
					"avatar": doctor_info.avatar,
					"msg": contact_msg,
					"type_role": 1,
				}]
			}
			//查询是否聊天过期
			if(chatlist != null) {
				if(chatlist[usernameIM] != undefined) {
					// var is_chat = ImUtilModule.isLastChat(chatlist[usernameIM]);
					if(!is_chat) {
						// $("body").css("padding-bottom", "0");
						$(".is_chat_no").show();
						$(".is_chat_off").hide();
						$(".prompt-dilog").show();
						utilModule.post({
							url: "consultOrderPay/confirmFinishOrder",
							data: {
								id: orderid,
								orderType: payStatus
							},
							needJson: true,
							async: false,
							success: function(response) {
								console.log('订单状态');
							}
						});
					}
				}
			}
			//获取 聊天记录
			var chatlist = JSON.parse(utilModule.getStorage("chat_list"));
			if(chatlist != null && chatlist != "undefined" && chatlist != '' && chatlist.length != 0) {
				if(chatlist[usernameIM]) {
					chatlist[usernameIM].push(arr_message[usernameIM][0]);
				} else {
					chatlist = $.extend({}, chatlist, arr_message);
				}
				utilModule.removeStorage("chat_list");
				utilModule.setStorage("chat_list", JSON.stringify(chatlist));
			} else {
				if(is_chat) {
					var is_c = utilModule.getStorage("is_chat");
					if(is_c == 1){
						$(".is_chat_no").show();
						mui.alert("问诊已经结束", '提示');
						utilModule.removeStorage("is_chat");
					}else{
						utilModule.setStorage("chat_list", JSON.stringify(arr_message));
					}
					
				}

			}
		});
		//load 聊天记录
		var html = "";
		if(chatlist != null && chatlist != "undefined" && chatlist != '' && chatlist.length != 0 && doctor_info != null) {
			$.each(chatlist[usernameIM], function(index, obj) {
				if(obj.type_role == 2) { // 2医生,3处方单,1患者,4患者普通图片,5医生图片
					html += '<li class="pullLeft">' +
						'<div class="doctorImg"><img src="' + doctor_info.avatar + '" alt=""></div>' +
						'<div class="dialogue">' +
						obj.msg +
						'</div>' +
						'</li>'
				} else if(obj.type_role == 1) {
					html += '<li class="pullRight">' +
						'<div class="dialogue2">' +
						obj.msg +
						'</div>' +
						'</li>'
				} else if(obj.type_role == 3) {
					html += '<li class="pullLeft">' +
						'<div class="doctorImg"><img src="' + doctor_info.avatar + '" alt=""></div>' +
						'<div class="picture3">' +
						'<a class="inquiry-img" href="../../html/onlineContinuation/drug-delivery.html?id=' + obj.chufang_id + '" onclick="window.location.href=&quot../../html/onlineContinuation/drug-delivery.html?id='+obj.chufang_id+'&quot"><img src="http://xinyuyl.oss-cn-beijing.aliyuncs.com/app/doctor/cfd1.png" alt="" width=210px height=60px ></a>' +
						'</div>' +
						'</li>'
				} else if(obj.type_role == 4) {
					html += '<li class="pullRight">' +
						'<div class="picture"><img src="' +
						obj.msg +
						'" alt="" data-preview-src="" data-preview-group="1" ></div>' +
						'</li>'
				} else if(obj.type_role == 5) {
					html += '<li class="pullLeft">' +
						'<div class="doctorImg"><img src="' + doctor_info.avatar + '" alt=""></div>' +
						'<div class="picture2">' +
						'<img src="' + obj.img + '" alt="" data-preview-src="" data-preview-group="1" >' +
						'</div>' +
						'</li>'
				}
			});
		}

	$("#im_content").append(html);
	mui.scrollTo(10000, 500);
	});
</script>